import QtQuick 2.0

Item {
    id:container
    property string title;
    property string imageUrl;
    property string socialRank;
    property string sourceUrl;
    width: recipeItems.width
    height: recipeItems.height

    Row{
        id: recipeItems
        anchors.top: container.top
        anchors.topMargin: 4
        anchors.left: container.left
        anchors.leftMargin: 0
        spacing: 10

        Column{

            Rectangle {
                height: 154
                width: 154
                color: content.border.color

                Image {
                    id: thumbNailOne
                    source: container.imageUrl
                    height: 150
                    width: 150
                    visible : true
                    anchors.centerIn: parent
                    MouseArea{
                                   x: 1
                                   y: 1
                                   anchors.rightMargin: 0
                                   anchors.bottomMargin: 0
                                   anchors.leftMargin: 1
                                   anchors.topMargin: 1
                                   anchors.fill: thumbNailOne
                                   onClicked: {
                                       console.log(container.sourceUrl);
                                       recipeWebView.url = container.sourceUrl;
                                       recipeWebView.visible = true;
                                       backButton.visible = true;
                                       recipeFlickable.visible = false;
                                       console.log(container.sourceUrl);
                       }
                    }
                }
            }
        }

        Column{
            //anchors.top: container.top
            //anchors.topMargin: 4
            //anchors.left: container.left
            //anchors.leftMargin: 0
            Row{
                Text {
                    id: dishTitle
                    /*anchors.top: parent.top
                    anchors.topMargin: 30
                    anchors.left: parent.left
                    anchors.leftMargin: 200*/
                    text: container.title
                    font.family: "Verdana"
                    font.bold: false
                    font.pixelSize: 20
                    width: 500
                    visible: true
                    wrapMode:"WordWrap"
                }
            }

            Row{
               /* Text {
                    id: rankTitle

                    text: "Social Rating: "
                    font.bold: false
                    font.pixelSize: 20
                    font.family: "Times new roman"
                    visible: true
                    height: 150
                    wrapMode:"WordWrap"
                }*/

                /*Text {
                    id: rank
                    text: container.socialRank
                    font.bold: false
                    font.pixelSize: 20
                    font.family: "Times new roman"
                    visible: true
                    wrapMode:"WordWrap"
                }*/

                Image {
                    id: rankImage
                    /*anchors.top: parent.top
                    anchors.topMargin: 10
                    anchors.left: parent.left
                    anchors.leftMargin: 10*/
                    source: container.socialRank
                    height: 100
                    width: 180
                    visible : true;
                }

            }



        }
    }




}
